<template>
  <div class="homeView">
    <div>
      <nav
        style="
          color: #ffffff;
          font-size: 40px;
          width: 100%;
          text-align: center;
          margin-bottom: 100px;
        "
      >
        {{ this.$appName }}
      </nav>

      <div class="title">{{ title }}</div>
      <canvas ref="canvas" style="display: none"></canvas>
      <div class="content">
        <video class="videos" ref="video" autoplay></video>
      </div>
      <div>
        <p class="kgdl" v-if="this.msg" @click="kgdlHandle(1)">身份证号登录</p>
        <button class="btn" v-if="!this.msg" @click="handleClick">
          点击进行身份证验证
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import $api from "../utils/api";
export default {
  props: {
    msg: {
      type: Boolean,
    },
  },
  data() {
    return {
      photoUrl: null,
      videoStream: null,
      data: null,
      showFlag: false,
      ifSendQuest: true,
      ifSendQuestExaminer: true,
      timer: null,
      title: "请进行考官识别",
      camerType: 0,
    };
  },
  created() {
    localStorage.clear();
  },
  mounted() {
    // 可以在mounted钩子中初始化相机，如果需要的话
    this.openCamera();
    this.takePicture();
  },
  destroyed() {
    clearInterval(this.timer);
  },

  methods: {
    async openCamera() {
      try {
        const stream = await navigator?.mediaDevices?.getUserMedia({
          video: true,
        });
        this.$refs.video.srcObject = stream;
        this.videoStream = stream;
        this.showFlag = true;
      } catch (error) {
        console.error("Error accessing the camera: ", error);
      }
    },
    takePicture() {
      this.timer = setInterval(() => {
        const video = this.$refs.video;
        const canvas = this.$refs.canvas;
        const ctx = canvas.getContext("2d");
        if (this.videoStream) {
          // 将视频流的画面绘制到canvas上
          canvas.width = video.videoWidth;
          canvas.height = video.videoHeight;
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
          // 将canvas的内容转换为图片URL
          this.photoUrl = canvas.toDataURL("image/png");

          this.getPhoto(this.photoUrl);
        }
      }, 2000);
    },
    getPhoto(baseDate) {
      if (this.ifSendQuestExaminer && this.msg) {
        $api.ExaminerFaceCheck({ base64: baseDate }).then((res) => {
          if (res.status == 200 && res.data.code !== 500) {
            
            this.data = res.data.data;
            localStorage.setItem("examinerInfo", JSON.stringify(this.data));
            localStorage.setItem("kgId", res.data.data[0].id);
            localStorage.setItem("imgUrl1", res.data.data[0].signImg);
            this.ifSendQuestExaminer = false;
            this.$message({
              message: "考官识别成功！",
              type: "success",
              duration: 1000,
            });

            setTimeout(() => {
              this.$router.push({
                name: "openText",
              });
              this.ifSendQuestExaminer = true;
            }, 1000);
          } else if (res.data.msg !== "Index: 0, Size: 0") {
            this.$message({
              message: "考官识别失败",
              type: "warning",
            });
          }
        });
      }
    },
    handleClick() {
      this.$router.push({
        name: "sfzView",
      });
    },
    kgdlHandle(value) {
      this.$router.push({
        name: "KgSfz",
        params: {
          value,
        },
      });
    },
  },
};
</script>
<style scoped>
.homeView {
  width: 100vw;
  height: 100vh;
  background-image: url(../assets/keji1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.title {
  font-size: 40px;
  width: 300px;
  height: 50px;
  text-align: center;
  margin: 30px auto;
  color: #ffffff;
}
.btn {
  width: 200px;
  height: 40px;
  margin-top: 20px;
  margin-left: 50%;
  transform: translate(-50%);
}
.content {
  text-align: center;
}
.videos,
.take_picture {
  width: 60%;
  transform: rotate(180deg);
}
.kgdl {
  width: 300px;
  height: 50px;
  border-radius: 10px;
  font-size: 25px;
  margin-top: 20px;
  margin-left: 50%;
  transform: translate(-50%);
  text-align: center;
  background: #efefef;
  line-height: 50px;
}
</style>